<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title>textHouses</title>
    <link rel="stylesheet" href="/css/bootstrap.css">
    <script src="/js/jquery.js"></script>
    <script src="/js/bootstrap.js"></script>
    <style>
        .logo{
            background-image: url("/img/banner2.jpg");
            background-position: center left;
            background-size: cover;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            margin: 0px 20px;
            box-shadow:
                /*logo*/ 0px 0px 2px #5f5f5f,
                /*effset*/ 0px 0px 0px 5px #ecf0f3,
                /*bottom right*/ 8px 8px 15px #a7aaaf,
                /*top left*/ -8px -8px 15px #ffffff;
        }
        .top-buffer{
            margin-top: 20px;
        }
    </style>
</head>
<body>
<div class="container border-3 top-buffer" id="messageList" >
    <div class="row">
        <div class="col-md-3" th:each="house,h:${session.housepage.getList()}">
            <div class="card top-buffer">
                <img th:src="|/${session.imagepage.getList().get(h.index)}|" class="card-img-top img-responsive center-block" alt="...">
                <div class="card-body">
                    <h5 class="card-title" th:text="${house.housename}"></h5>
                    <p class="card-text" th:text="${house.housedescription}"></p>
                    <a  class="btn btn-outline-primary" th:onclick="loadHouseDetail([[${house.houseid}]])" href="#">查看</a><!--href="HouseInfo.html"-->
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-5"></div>
        <div class="col-md-3">
            <nav aria-label="Page navigation example" class="top-buffer">
                <ul class="pagination btn-lg">
                    <li class="page-item">
                        <a class="page-link" href="#" aria-label="Previous" th:class="!${session.housepage.hasPreviousPage}? 'page-link btn disabled':'page-link' " th:onclick="loadNewPageForFindHousesByText([[${session.housepage.prePage}]])">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    <li th:each="i : ${session.housepage.navigatepageNums}" th:class="${i}==${session.housepage.pageNum}?'active page-item':'page-item' ">
                        <a class="page-link" href="#" th:onclick="loadNewPageForFindHousesByText([[${i}]])" >[[${i}]]</a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="#" aria-label="Next" th:class="!${session.housepage.hasNextPage}? 'page-link btn disabled':'page-link' " th:onclick="loadNewPageForFindHousesByText([[${session.housepage.nextPage}]])">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</div>
</body>
<script>
    function loadNewPageForFindHousesByText(pageNo) {
        var housetext = document.getElementById("housetext").value;
        $.ajax({
            url:'/house/to_findHousesByText',
            type:'GET',
            data:{"pageNo":pageNo, "housetext":housetext},
            async:true,
            success:function (data) {
                $('#allItems').html(data);
            },
            error: function () {
                alert( "请求错误！！");
            }
        })
    }
    function loadHouseDetail(houseid) {
        $.ajax({
            url:'/house/to_houseDetail',
            type:'get',
            data:{"houseid" : houseid},
            async:true,
            dataType: "html",
            contentType: 'application/json; charset=utf-8',
            success:function (html){
                $('#allItems').html(html);
                loadComments();
            },
            error: function () {
                alert("请求错误！！");
            }
        })
    }
    function loadComments() {
        $.ajax({
            url:'/comment/getHouseComments',
            type:'GET',
            async:true,
            dataType: "html",
            contentType: 'application/json; charset=utf-8',
            success:function (html) {
                $('#houseCommentInfo').html(html);
            }
        })
    }
</script>
</html>